<template>
	<w-layout :navBack="false" showTabbar showNavbar navTitle="首页" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container px-30">
				<!-- 轮播图 -->
					<view class="" style="position: relative;width: 100%;height: 400rpx;">
						<swiper v-if="swiper.list && swiper.list.length" @change="swiperChange" class="swiper" :autoplay="true">
							<swiper-item class="w-100 h-100 fc-ac-jc" v-for="(item,index) in swiper.list" :key="index">
								<image class="w-99 h-98" style="background-color: #fff;" :src="item.imgurl" mode=""></image>
							</swiper-item>
						</swiper>
						<view class="swiper-cover"></view>
						<view class="fr-ac-jc swiper-indicator-dots">
							<template v-for="(item,index) in swiper.list.length" :key="index">
								<image style="width: 16rpx;height: 16rpx;" class="mx-8" :src="index==swiper.current?'/static/icon/public/dots-fill.png':'/static/icon/public/dots-empty.png'" mode=""></image>
							</template>
						</view>
					</view>
				<!-- 提示按钮 -->
				<view class="fr-ac tips-icon">
					<image @click="popup.showNotice=true" class="ml-auto mr-10" style="height: 80rpx;width: 88rpx;" src="/static/icon/public/tips.png" mode="widthFix"></image>
				</view>
				<!-- 公告 -->
				<view v-if="contentState.notice.content" class="gong-gao mt-100 fr-ac" style="line-height: 64rpx;">
					<view class="w-20" style="height: 64rpx;"></view>
					<view class="flex-1 pt-8" style="height: 64rpx;width: 580rpx;">
						<up-notice-bar 
							:text="contentState.notice.content"
							bgColor="transparent"
							icon=""
							:color="publicStyles['--color-t1']"
						></up-notice-bar>
					</view>
				</view>
				<!-- 大卡片按钮 -->
				<view class="fr-ac-jsb mt-50">
					<view @click="goBigCard(item)" class="big-card-item fc-ac" :style="{'background-image':`url(${item.image})`}" v-for="(item,index) in bigCard.list" :key="index">
						<view class=" mt-auto mb-35">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- 小卡片按钮 -->
				<view class="fr-ac-jsa mt-50">
					<view @click="goSmallCard(item)" class="fc-ac" v-for="(item,index) in smallCard.list" :key="index">
						<image style="width: 92rpx;height: 92rpx;" :src="item.image" mode="widthFix"></image>
						<view class=" mt-15">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- tabs -->
				<up-tabs
					@change="tabChange"
					:list="tabs.list" 
					:current="tabs.current"
					lineWidth="14"
					lineHeight="14"
					:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
					:activeStyle="{
						color: publicStyles['--color'],
						fontWeight: 'bold',
						transform: 'scale(1.2)'
					}"
					:scrollable="false"
					itemStyle="height: 60px;"
					:inactiveStyle="{
						'font-size': '32rpx',
					}"
				>
				</up-tabs>
				
				<view class="my-20">
					<view @click="goDetail(item)" v-for="(item,index) in state.list" :key="index" class="public-card-1 fr px-30 py-30 mb-30" style="min-height: 320rpx;">
						<cut-corner :arrow="2">
							<view class="" style="width: 374rpx;height: 272rpx;">
								<image class="w-100 h-100" :src="item.imgurl" mode=""></image>
							</view>
						</cut-corner>
						<view class="ml-30 mt-40 fc">
							<view class="fs-32" style="line-height: 1.6;">
								{{item.type_text=='无限赏'?'':item.type_text}} {{item.title}}
							</view>
							<view class="mt-auto">
								<view v-if="item.struck_price > 0" class="fs-32 color" style="color: #135866;text-decoration: line-through;">
									￥{{item.struck_price}}
								</view>
								<view class="fs-36 mt-5 color">
									￥{{item.price}}
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<no-more :show="state.list.length == 0"></no-more>
				
				<up-popup :show="popup.showNotice" @close="popup.showNotice=false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-1 px-50 py-20 fc" style="width: 670rpx;position: relative;">
						<view class="fs-36">
							活动公告
						</view>
						<view class="mt-80" style="max-height: 720rpx;overflow: scroll;line-height: 1.8;">
							<view class="">
								<up-parse :content="contentState.activity_notice.content"></up-parse>
							</view>
						</view>
						<view @click="popup.showNotice = false" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								知道了
							</view>
						</view>
						<view @click="showNoticeChange" class="fr-ac-jc" style="position: absolute;bottom: -80rpx;left: 50%;transform: translateX(-50%);">
							<up-icon v-if="!userStore.showNoticeToday" name="yuanxingxuanzhongfill" customPrefix="custom-icon" size="18"
								:color="publicStyles['--color']"></up-icon>
							<up-icon v-else name="yuanxingweixuanzhong" customPrefix="custom-icon" size="18"
								:color="publicStyles['--color-t1']"></up-icon>
							<view class="ml-20">
								今日不再提醒
							</view>
						</view>
					</view>
				</up-popup>
				
				<up-popup :show="popup.showExchange" @close="popup.showExchange=false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-3 px-50 py-20 fc" style="width: 670rpx;position: relative;">
						<view class="fs-36">
							兑换码
						</view>
						<view class="mt-80" style="line-height: 1.8;">
							<view class="fs-32 color">
								输入兑换码<text class="mx-10"></text>领取福利
							</view>
						</view>
						<view class="fr-ac mt-50">
							<view class="">
								兑换码
							</view>
							<view class="public-input-1 px-30 py-30 fr-ac-jsb flex-1 ml-50" style="color: #fff;">
								<input v-model="cdk" class="flex-1 fs-26" type="text" placeholder="请输入兑换码" />
							</view>
						</view>
						<view @click="confirmExchange" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								领取福利
							</view>
						</view>
					</view>
				</up-popup>
				
				<up-popup :show="popup.showObtain" @close="popup.showObtain=false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;position: relative;">
						<view class="fs-36">
							恭喜获得
						</view>
						<view class="mt-100 fc-ac">
							<view class="public-cover-2 t-c fs-36" style="width: 360rpx;height: 70rpx;">
							</view>
							<view class="fr-ac-jsa w-100 mt-70">
								<view class="fc-ac">
									<image style="width: 112rpx;height: 112rpx;" src="/src/static/icon/public/coupon.png" mode="widthFix"></image>
									<view class="mt-10">
										<text class="">
											{{state.exchange_result.title}}
										</text>
									</view>
								</view>
								<view v-if="state.exchange_result.integral" class="fc-ac">
									<image style="width: 112rpx;height: 112rpx;" src="/src/static/icon/public/yuan-bao.png" mode="widthFix"></image>
									<view class="mt-10">
										<text class="">
											精粹
										</text>
										<text class="color ml-5">x{{state.exchange_result.integral}}</text>
									</view>
								</view>
							</view>
						</view>
						<view @click="popup.showObtain = false;" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								确定
							</view>
						</view>
					</view>
				</up-popup>
				
				<up-popup :show="popup.showCoupon" @close="popup.showCoupon=false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;position: relative;">
						<view class="fs-36">
							每日优惠券
						</view>
						<view class="w-100 color fs-32 mt-80">
							每日登录&nbsp;领取优惠卷
						</view>
						<scroll-view scroll-x="true" class="mt-50">
							<view class="fr-ac">
								<view class="public-card-13 mr-30" style="min-width: 226rpx;height: 294rpx;" v-for="(item,index) in state.coupon_list" :key="index">
									<view class="h-50 fc-ac-jc">
										<view class="color">
											<text class="fs-32">￥</text>
											<text class="fs-46">{{item.price}}</text>
										</view>
										<view class="op-90 mt-5">
											满{{item.man_price}}可用
										</view>
									</view>
									<view class="h-50 fc-ac-jc">
										<view v-if="item.goods_title" class="fs-24 op-90">
											{{item.goods_title}}
										</view>
										<view class="fs-24 op-50 mt-15">
											{{item.title}}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
						<view @click="get_receive_login_coupon" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								一键领取
							</view>
						</view>
					</view>
				</up-popup>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		debounce
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance,
		nextTick,
		computed,
	} from 'vue'
	import {
		onLoad,
		onPageScroll,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import {
		storeToRefs
	} from 'pinia'
	import {
		getHomeIndex,
		getHomeGoods,
		cdk_exchange,
		coupon_info,
		get_login_coupon,
		receive_login_coupon
	} from '@/utils/request/api';
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		useUserStore
	} from '@/store/user'
	import {
		useWebviewStore
	} from '@/store/webview'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const webviewStore = useWebviewStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)

	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onLoad(async (options) => {
		getHomeIndexApi()
		getHomeGoodsApi()
	})
	onShow(()=>{
		if(userStore.isLogin){
			get_login_couponApi()
		}
		if (userStore.getNoticeDate() != userStore.showNoticeDate) {
			userStore.showNoticeToday = true
			popup.showNotice = true
		}
	})
	onPageScroll((e)=>{
		debounce(function(){
			page.scrollTop = e.scrollTop
		},500)()
	})
	onReachBottom(() => {
		if(state.last_limit == state.limit){
			state.page++
			getHomeGoodsApi()
		}
	})
	const page = reactive({
		scrollTop:0
	})
	
	const swiper = reactive({
		current:0,
		list:[1,1,1,1]
	})
	function swiperChange(e){
		swiper.current = e.detail.current
	}
	function showNoticeChange(){
		userStore.showNoticeToday = !userStore.showNoticeToday
		if (!userStore.showNoticeToday) {
			userStore.showNoticeDate = userStore.getNoticeDate()
		} else {
			userStore.showNoticeDate = ''
		}
	}
	
	const cdk = ref('')
	
	async function confirmExchange(){
		if(!cdk.value){
			return uni.$u.toast('请输入兑换码')
		}
		const res = await cdk_exchange({
			cdk:cdk.value
		})
		cdk.value = ''
		popup.showExchange = false
		if (res.coupon_id || res.integral > 0) {
			state.exchange_result = res
			const res2 = await coupon_info(res)
			state.exchange_result = Object.assign(res2, state.exchange_result)
			popup.showObtain = true
			console.log(state.exchange_result,'state.exchange_result')
		}
		
	}
	const bigCard = reactive({
		list:[
			{
				name:'口令红包',
				image:'/static/icon/public/big-card-1.png',
				url:'/pages/red_envelope/index',
				id:1
			},
			{
				name:'兑换码',
				image:'/static/icon/public/big-card-2.png',
				url:'',
				id:2
			},
			{
				name:'福利屋',
				image:'/static/icon/public/big-card-3.png',
				url:'/pages/benefit/list',
				id:3
			}
		]
	})
	function goBigCard(item){
		if(item.id !== 2){
			uni.navigateTo({
				url:item.url
			})
			return
		}else{
			popup.showExchange = true
		}
	}
	
	const smallCard = reactive({
		list:[
			{
				name:'签到',
				image:'/static/icon/public/8side-1.png',
				url: '/pages/vip/sign'
			},
			{
				name:'优惠券',
				image:'/static/icon/public/8side-2.png',
				url: '/pages/vip/coupon'
			},
			{
				name:'月福利',
				image:'/static/icon/public/8side-3.png',
				url: '/pages/vip/benefit'
			},
			{
				name:'充值',
				image:'/static/icon/public/8side-4.png',
				url: '/pages/mine/yuan_bao'
			}
		]
	})
	function goSmallCard(item){
		uni.navigateTo({
			url:item.url
		})
	}
	
	
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:'',
				name:'全部',
			},
			{
				id:'2',
				name:'无限赏',
			},
			{
				id:'1',
				name:'一番赏',
			},
			{
				id:'5',
				name:'精气赏',
			},
			{
				id:'3',
				name:'擂台赏',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		initData()
		getHomeGoodsApi()
		console.log(tabs.current)
	}
	
	const popup = reactive({
		showNotice:false,
		showExchange:false,
		showObtain:false,
		showCoupon:false,
	})
	
	const contentState = reactive({
		activity_notice:{
			content: '',
			title: ''
		},
		notice:{
			content: '',
			title: ''
		},
	})
	async function getHomeIndexApi(){
		const res = await getHomeIndex({
			
		})
		console.log(res,'res')
		swiper.list = res.advert
		contentState.notice = res.notice
		contentState.activity_notice = res.activity_notice
	}
	async function getHomeGoodsApi(){
		const res = await getHomeGoods({
			type: tabs.list[tabs.current].id,
			page: state.page
		})
		state.last_limit = res.data.length
		state.list = state.list.concat(res.data)
	}
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
		
		exchange_result: {},
		
		coupon_list: [],
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	function goDetail(item){
		let url = ''
		switch (item.type){
			case 2:
				url = `/pages/wuxian_shang/index?id=${item.id}`
				break;
			case 1:
				url = `/pages/yifan_shang/index?id=${item.id}`
				break;
			case 5:
				url = `/pages/yuanqi_shang/index?id=${item.id}`
				break;
			case 8:
				url = `/pages/wuxian_shang/index?id=${item.id}`
				break;
			case 3:
				url = `/pages/leitai_shang/index?id=${item.id}`
				break;
			default:
				break;
		}
		uni.navigateTo({
			url
		})
	}
	
	
	async function get_login_couponApi(){
		const res = await get_login_coupon({})
		state.coupon_list = res
		
		const is_all = state.coupon_list.findIndex(e=>{
			return e.is_receive != 1
		})
		if(is_all != -1){
			popup.showCoupon = true
		}
	}
	
	async function get_receive_login_coupon(){
		const coupon_ids = state.coupon_list.filter(e=>e.is_receive != 1).map(e=>{
			return e.id
		})
		const res = await receive_login_coupon({
			coupon_id:coupon_ids.toString()
		})
		uni.$u.toast('领取成功！')
		popup.showCoupon = false
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}

	.txt-gray {
		color: var(--gray-9);
	}
	
	

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;

	}
	
	.swiper{
		width: 100%;height: 400rpx;
		.swiper-item{
		}
	}
	.swiper-cover{
		position: absolute;
		top: 0;
		left: 0;
		inset:0;
		background: url('/static/image/img-1.png') no-repeat;
		background-size: 100% 100%;
		pointer-events: none;
	}
	
	.swiper-indicator-dots{
		position: absolute;
		bottom: -40rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.tips-icon{
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		width: 750rpx;
		top: 490rpx;
		z-index: 999;
	}
	.gong-gao{
		background: url('/static/icon/public/gong-gao.png') no-repeat;
		background-size: 100% 100%;
		height: 64rpx;
	}
	
	.big-card-item{
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 192rpx;
		height: 220rpx;
	}
</style>